<template>
  <div>
    <div class="main1"><img src="https://assetscdn.c.hihonor.com/defaultVirtualUser/null/null/myhonor/cn/greater_china/null/img/63606d5f6d66137f07acb6bc.png?fileSize=984*426&sourceId=63606d5f6d66137f07acb6bf&sourceType=img" alt=""></div>
    <div class="main2">
        <div class="main21">
            <div>10</div>
            <div>我的积分</div>
        </div>
        <div class="main22">
            <van-icon name="points" />
            <div>积分规则</div>
        </div>
        <div class="main23">
            <van-icon name="gift-o" />
            <div>兑换记录</div>
        </div>
    </div>
    <div class="main3" @click="fun1()"><img src="https://assetscdn.c.hihonor.com/defaultVirtualUser/null/null/myhonor/cn/greater_china/null/img/63565b9d6d66137f07acb52e.jpg?fileSize=960*480&sourceId=63565b9d6d66137f07acb531&sourceType=img" alt=""></div>
    <div class="main4">
        <div class="main41">购机优惠</div>
        <div class="main42">领券购机更优惠</div>
        <div class="main43">查看更多</div>
        <van-icon class="van-icon" name="arrow" />
    </div>
    <div class="bigbox">
    <div class="jifenbox" v-for="(item,index) in list" :key="index">
        <div class="jifenbox1"><img :src="item.src" alt=""></div>
        <div class="jifenbox2">{{item.title}}</div>
        <div class="jifenbox3">{{item.jifen}}</div>
    </div>
    </div>

    <div class="main4">
        <div class="main41">购机优惠</div>
        <div class="main42">领券购机更优惠</div>
        <div class="main43">查看更多</div>
        <van-icon class="van-icon" name="arrow" />
    </div>
    <div class="bigbox">
    <div class="jifenbox" v-for="(item,index) in list" :key="index">
        <div class="jifenbox1"><img :src="item.src" alt=""></div>
        <div class="jifenbox2">{{item.title}}</div>
        <div class="jifenbox3">{{item.jifen}}</div>
    </div>
    </div>

        <div class="main4">
        <div class="main41">购机优惠</div>
        <div class="main42">领券购机更优惠</div>
        <div class="main43">查看更多</div>
        <van-icon class="van-icon" name="arrow" />
    </div>
    <div class="bigbox">
    <div class="jifenbox" v-for="(item,index) in list" :key="index">
        <div class="jifenbox1"><img :src="item.src" alt=""></div>
        <div class="jifenbox2">{{item.title}}</div>
        <div class="jifenbox3">{{item.jifen}}</div>
    </div>
    </div>
    
  </div>

</template>

<script>
export default {
    data(){
        return{
            list:[],
        }
    },
    mounted(){
        this.$http({
            url:"http://localhost:3000/gouji",
            method:"get", 
        }).then(res=>{
            this.list = res.data
        }) 
    },
    methods:{
          fun1(){
            this.$router.push("/duihuan")
        }
    }
}
</script>

<style scoped>
*{
    padding: 0;
    margin: 0;
}
.main1 img{
    width: 21.4375rem;
    height: 9.25rem;
    border-radius:.625rem ;
    margin-left:.925rem ;
    margin-top: 3.05rem;
}
.main2{
    width: 21.4375rem;
    height: 5.0625rem;
    border-radius:.625rem ;
    margin-left:.925rem ;
    background-color: white;
    display: flex;
    padding: 16px;
}
.main21{
    margin: .375rem;
    text-align: center;
    margin-left: 1.5625rem;
}
.main22{
    margin: .175rem;
    margin-left: 1.875rem;
    text-align: center;
}
.main23{
    margin: .175rem;
    margin-left: 1.875rem;
    text-align: center;
}
.main3 img{
    width: 21.4375rem;
    height: 11.1875rem;
    margin-left:.925rem ;
    margin-top: .625rem;
}
.main4{
    display: flex;
    margin-top: 1.875rem;
    height: 3rem;
    margin-left: 1.25rem;
}
.main41{
    font-size:1rem;
}
.main42{
    font-size: .75rem;
    font-weight: 43.75rem;
    color:#9d9e9f ;
    margin-top: .3125rem;
    margin-left: .3125rem;
}
.main43{
    color:#606162 ;
    margin-left: 6.25rem;
    margin-right: .3125rem
    ;
}
.van-icon{
    margin-top: .25rem;
}
.bigbox{
    display: flex;
    flex-wrap: wrap;
}
.jifenbox{
    width:11rem ;
    height:15.9375rem ;
    border-radius:.625rem ;
    background-color: white;
    margin-left: .5rem;
    margin-top: .5rem;
}
.jifenbox1 img{
    width: 10.9375rem;
    height:10.9375rem;
    border-radius:.625rem ;
}
.jifenbox2{
    margin-left:.625rem ;
    margin-top: .3125rem;
    font-size: .875rem;
}
.jifenbox3{
    margin-left:.625rem ;
    margin-top: 1.125rem;
    font-size: .875rem;
}
</style>